<template>
  <!-- 我的积分 -->
	<div class="">
		<naviHeader></naviHeader>
    
    <div class="header">
      <div class="title-container">
        <div class="title">我的积分</div>
        <router-link to="/integralRecord">
          <div class="btn">积分明细</div>
        </router-link>
      </div>

      <div class="figure">
        <div>
          <div class="integral"><span>{{integral}}</span> 积分</div>
          <router-link to="/integralList">
            <div class="btn">排行榜</div>
          </router-link>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="title">积分攻略</div>

      <div v-for="item in list" :key="item.index">
        <router-link v-bind:to="item.url">
          <div class="item">
            <div><img class="img" v-bind:src="item.img" alt=""></div>
            <div class="info-container">
              <div class="name-container">
                <div class="name">{{item.name}}</div>
                <div class="btn">{{item.btn}}</div>
              </div>

              <div>{{item.description}}</div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
	</div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";

export default {
  data() {
    return {
      integral: this.$store.userInfo.score || 0,

      list: [
        // {
        //   img: require("../../images/icon/integral.png"),
        //   name: "签到",
        //   btn: "去签到",
        //   description: "每天签到挣积分\n连续签到15天，奖励50积分",
        //   url:'/signIn'
        // },
        {
          img: require("../../images/icon/integral.png"),
          name: "观看课程",
          btn: "看课程",
          description:
            "收听音频可以获得2积分，观看视频可以获得2积分，积分数根据观看的时长来决定，不满一分钟则不计算（每个音频，视频只能获取一次）",
          url:'/courseAll'
        },
        // {
        //   img: require("../../images/icon/integral.png"),
        //   name: "分享",
        //   btn: "分享课程",
        //   description:
        //     "分享视频可获得50积分，分享音频可获得50积分，分享文章可获得积分（第一次分享有积分，再分享则无）",
        //   url:'/signIn'
        // },
        // {
        //   img: require("../../images/icon/integral.png"),
        //   name: "邀请好友",
        //   btn: "去邀请",
        //   description: "成功邀请一位学员可获得100积分",
        //   url:'/signIn'
        // }
      ]
    };
  },

  mounted() {
    // console.log(title, descriptions);
  },
  components: {
    naviHeader
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
.header {
  background: #fff;

  .title-container {
    height: 1.2rem;
    line-height: 1.2rem;

    .title {
      @include sc(0.4rem, #000);
      float: left;
      margin-left: 3rem;
    }

    .btn {
      float: right;
      margin-right: 0.3rem;
    }
  }

  .figure {
    @include fj(center);
    align-items: center;

    height: 3rem;
    background: rgb(255, 135, 130);

    .integral {
      color: #fff;
      text-align: center;
      margin-bottom: 0.4rem;

      span {
        padding: 0.5rem;
        @include sc(0.5rem, #fff);
      }
    }

    .btn {
      background: rgb(255, 135, 130);
      border-radius: 25px;
      color: #fff;
      border: 2px solid #fff;
      padding: 0.1rem;
      width: 3rem;
      text-align: center;
    }
  }
}

.content {
  background: #fff;

  .title {
    @include sc(0.36rem, #000);
    line-height: 1rem;
    height: 1rem;
    border-bottom: 2px solid #f1f1f1;
    padding-left: 0.5rem;
  }

  .item {
    @include fj(space-between);
    padding: 0.2rem;

    .img {
      height: 0.8rem;
      width: 0.8rem;
      margin: 0.2rem;
    }

    .info-container {
      width: 92%;

      .name-container {
        @include fj(space-between);
        align-items: center;
        height: 1rem;
        // line-height: 1rem;

        .btn {
          @include sc(0.26rem, #bfbfbf);

          padding: 0.1rem 0.2rem;
          border-radius: 10px;
          border: 2px solid #bfbfbf;
        }
      }
    }
  }
}
</style>
